<template>
    <div>
      <!--3 使用组件-->
      <BHeader :back="true">首页</BHeader>
      <div class="swiperContent">
        <Loading v-if="loading"></Loading>
        <template v-else>
            <Swiper :swiper-slides="swiperSlides"></Swiper>
            <h3>热门图书</h3>
            <div class="container">
              <ul>
                <li v-for="hot in hotBooks">
                  <img :src="hot.bookCover">
                  <b>{{hot.bookName}}}</b>
                </li>
              </ul>
            </div>
        </template>

      </div>
      Home.vue
    </div>
</template>

<script>
  //1 引入组件
  import BHeader from '../base/BHeader.vue';
  import Swiper from '../base/Swiper.vue';
  import Loading from '../base/Loading.vue';

  //2 轮播图 api， api里面不是默认导出需要用{名字} 精确取名字
  // import {getSliders,getHot} from '../api';
  import {getHome} from '../api';
    export default {
         created(){
         /* this.getSli();
          this.getHot();*/
         this.getData();
        },
        methods:{
          async getData(){
            let res  = await getHome();
            // console.log(res)
            let [swiperSlides,hotBooks] = res;
            this.swiperSlides = swiperSlides;
            this.hotBooks = hotBooks;
            //轮播图和热门图书 全部完成
            this.loading = false;
           },
          async getSli(){
            //给data 取别名,data不能改要和getSliders返回的对象里的属性 async await可以取代 axios的then方法，await接受的是promise对象
            let {data:sliders} = await getSliders();
            console.log(sliders);
            this.swiperSlides = sliders;
          },
          async getHot(){
            let {data:hots} = await getHot();
            console.log(hots);
            this.hotBooks = hots;
          }
        },
        components:{
          BHeader,// 2注册组件
          Swiper,
          Loading
        },
        data() {
          // swiperSlides: [],hotBooks: [],
            return {swiperSlides:[],hotBooks:[],loading:true}
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  h3{
    color: #999;
    padding: 5px 0;
  }

  //图书来点边距
  .container{
    width: 90%;
    margin: 0 auto;
    ul{
      display: flex;
      flex-wrap: wrap;//默认不换行
      padding-bottom: 10px;
      li{
        width: 50%;
        text-align: center;
        margin: 5px 0;
        img{width: 100%}
      }
    }
  }
</style>
